<template>
    <div class="box">
        <h3>路由缓存</h3>
        <pre>
        vue-router模块完成路由导航切换操作，为路由组件的创建删除调用。
        1、路由自带缓存
            + 当路由切换时只有地址参数发生变化，而需要被显示的路由组件未发生改变时，该路由组件不会销毁，只有路由信息对象在更新
            + 所以程序运行时，如果触发了路由自带缓存，将会执行组件的创建生命周期，也就说在缓存模式下，无法通过参数变化反复初始化组件请求
              上述问题的解决方案：
                方案1：为 $route 定义监视器 【不建议使用-极度消耗内存】
                方案2：使用路由守卫 onBeforeRouteUpdate

        2、手动缓存
            + 将RouterView组件和KeepAlive组件进行组合使用
            + vue-router@3 版本【vue@2】通过 KeepAlive 包裹 RouterView
                ＜KeepAlive＞
                    ＜RouterView＞＜/RouterView＞
                ＜/KeepAlive＞
            + vue-router@4 版本【vue@3】通过RouterView分发加载 KeepAlive 以及Component 组件实现缓存
                ＜RouterView v-slot="｛ Component ｝"＞
                    ＜KeepAlive＞
                        ＜Component :is="Component"＞＜/Component＞
                    ＜/KeepAlive＞
                ＜/RouterView＞
            + 动画结合
                + vue-router@3 版本【vue@2】
                    ＜Transition＞
                        ＜RouterView＞＜/RouterView＞
                    ＜/Transition＞
                + vue-router@4 版本【vue@3】
                    ＜RouterView v-slot="｛ Component ｝"＞
                        ＜Transition＞
                            ＜Component :is="Component"＞＜/Component＞
                        ＜/Transition＞
                    ＜/RouterView＞
            + 动画+手动缓存
                + vue-router@3 版本【vue@2】
                    ＜KeepAlive＞
                        ＜Transition＞
                            ＜RouterView＞＜/RouterView＞
                        ＜/Transition＞
                    ＜/KeepAlive＞
                + vue-router@4 版本【vue@3】
                    ＜RouterView v-slot="｛ Component ｝"＞
                        ＜KeepAlive＞
                            ＜Transition＞
                                ＜Component :is="Component"＞＜/Component＞
                            ＜/Transition＞
                        ＜/KeepAlive＞
                    ＜/RouterView＞
        </pre>
        <h3>路由守卫</h3>
        <pre>
            路由守卫【导航守卫】：使用vue-router模块提供的基于路由切换行为的控制方法
                + 组件内守卫 ( 所有方法必然包含 将要访问的路由信息对象 to , 将要离开的路由信息对象 from )
                    - onBeforeRouteUpdate => 当路由切换时，路由组件未发生变化，但参数发生变化时触发的方法
                                             该方法执行时间早于 路由参数的解析 (在该方法中通过$route信息对象读取的参数依然为旧参数值)
                    - beforeRouteEnter ( 没有组合式用法 ) => 当路由切换到该组件时，展示当前组件之前执行的回调函数
                                                         => 该守卫方法如果定义了 return false ，当前页面将无法访问【导航切换终止】
                                                         => 该守卫方法如果通过 return 返回了 RouterLink 的to 属性取值格式的数据，
                                                            表示终止当前导航切换，启动新的导航切换
                                                         => 该守卫方法如果定义了 return true 或者未定义 return，表示继续访问当前导航
                    - onBeforeRouteLeave => 离开前执行的守卫，具有和 beforeRouteEnter 相同的返回功能
                + 组件全局守卫 ( 守卫被定义在 createRouter 模块文件中 )
                    - router.beforeEach(Function(to,from){}) => 定义全局环境的进入前守卫，功能和使用方式等同于 beforeRouteEnter
                                                             => 避免出现死循环导航
        </pre>

        <hr>
        <RouterLink :to="{ name:'guardA',query:{ arg:1 } }">子路由组件A-arg=1</RouterLink>
        <br>
        <RouterLink :to="{ name:'guardA',query:{ arg:2 } }">子路由组件A-arg=2</RouterLink>
        <br>
        <RouterLink :to="{ name:'guardB',params:{ arg:3 } }">子路由组件B-arg=3</RouterLink>
        <br>
        <RouterLink :to="{ name:'guardB',params:{ arg:4 } }">子路由组件B-arg=4</RouterLink>
        <br>
        <hr>
        <RouterView></RouterView>
        <hr>

    </div>
</template>
<script setup>
// import { onBeforeMount, onUnmounted } from 'vue';

// import { onBeforeRouteUpdate } from 'vue-router';

// onBeforeMount(function(){
//     console.log("GuardPage 组件被创建挂载")
// })
// onUnmounted(function(){
//     console.log("GuardPage 组件被销毁")
// })

</script>
<script>

export default {
    beforeRouteEnter(){
        console.log("beforeRouteEnter")
        // return false;
        // return {
        //     path:"/axios"
        // }
        // return true;

        // let num = Math.random();
        // console.log(num);
        // if(num<=0.8){
        //     return {
        //         path:"/axios"
        //     }
        // }else{
        //     return true
        // }
    },
    beforeRouteLeave(){
        console.log("beforeRouteLeave")
        let flag = confirm("订单支付尚未完成")
        if(!flag){
            return false
        }
    }
}
</script>

<style lang="scss" scoped>

</style>